<template>
  <div class="comment-section">
    <!-- 评论输入框 -->
    <div class="comment-input bg-white rounded-lg shadow-sm p-4 mb-4">
      <div class="flex items-start space-x-3">
        <el-avatar :src="currentUser.avatar" :size="40" />
        <div class="flex-1">
          <el-input
            v-model="commentContent"
            type="textarea"
            :rows="3"
            placeholder="分享您的游玩体验..."
            resize="none"
          />
          <div class="mt-3 flex items-center justify-between">
            <div class="rating-input flex items-center">
              <span class="text-sm text-gray-500 mr-2">评分：</span>
              <el-rate v-model="rating" />
            </div>
            <el-button type="primary" @click="submitComment">
              发表评论
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 评论列表 -->
    <div class="comments-list space-y-4">
      <div
        v-for="comment in comments"
        :key="comment.id"
        class="comment-item bg-white rounded-lg shadow-sm p-4"
      >
        <div class="comment-header flex items-center justify-between">
          <div class="user-info flex items-center space-x-3">
            <el-avatar :src="comment.user.avatar" :size="40" />
            <div>
              <div class="user-name font-medium">{{ comment.user.name }}</div>
              <div class="text-sm text-gray-500">
                {{ formatDate(comment.createdAt) }}
              </div>
            </div>
          </div>
          <el-rate v-model="comment.rating" disabled />
        </div>

        <div class="comment-content mt-3">
          <p class="text-gray-700">{{ comment.content }}</p>

          <!-- 图片展示 -->
          <div
            v-if="comment.images?.length"
            class="image-list mt-3 grid grid-cols-3 gap-2"
          >
            <el-image
              v-for="image in comment.images"
              :key="image"
              :src="image"
              :preview-src-list="comment.images"
              class="w-full h-24 object-cover rounded-lg"
            />
          </div>
        </div>

        <div
          class="comment-footer mt-3 flex items-center justify-between text-sm text-gray-500"
        >
          <span class="location flex items-center">
            <el-icon class="mr-1"><Location /></el-icon>
            {{ comment.location }}
          </span>
          <div class="actions flex">
            <el-button 
              :type="props.buttonStyle === 'arco' ? '' : 'text'"
              :class="props.buttonStyle === 'arco' ? 'arco-btn' : ''"
              @click="showReplyInput(comment)"
            >
              <el-icon><ChatDotRound /></el-icon>
              回复
            </el-button>
          </div>
        </div>

        <!-- 回复列表 -->
        <div
          v-if="comment.replies?.length"
          class="replies-list mt-4 pl-4 border-l-2 border-gray-100"
        >
          <div
            v-for="reply in comment.replies"
            :key="reply.id"
            class="reply-item py-3"
          >
            <div class="flex items-start space-x-3">
              <el-avatar :src="reply.user.avatar" :size="32" />
              <div class="flex-1">
                <div class="flex items-center">
                  <span class="font-medium">{{ reply.user.name }}</span>
                  <span class="text-gray-500 text-sm ml-2">{{
                    formatDate(reply.createdAt)
                  }}</span>
                </div>
                <p class="text-gray-700 mt-1">{{ reply.content }}</p>
                <div class="mt-2 flex justify-end space-x-2">
                  <el-button 
                    :type="props.buttonStyle === 'arco' ? '' : 'text'"
                    :class="props.buttonStyle === 'arco' ? 'arco-btn' : ''"
                    @click="showReplyInput(comment, reply)"
                  >
                    <el-icon><ChatDotRound /></el-icon>
                    回复
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 回复输入框 -->
        <div v-if="activeReplyId === comment.id" class="reply-input mt-4" :id="`reply-input-${comment.id}`">
          <div class="flex items-start space-x-3">
            <el-avatar :src="currentUser.avatar" :size="32" />
            <div class="flex-1">
              <div v-if="activeReplyToUser" class="reply-to-info mb-2 text-xs text-gray-500">
                回复 <span class="text-primary-600">@{{ activeReplyToUser.name }}</span>：
              </div>
              <el-input
                v-model="replyContent"
                type="textarea"
                :rows="2"
                :placeholder="activeReplyToUser ? '回复 @' + activeReplyToUser.name : '写下你的回复...'"
                resize="none"
              />
              <div class="mt-2 flex justify-end space-x-2">
                <el-button @click="cancelReply">取消</el-button>
                <el-button type="primary" @click="submitReply(comment)">
                  回复
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 加载更多 -->
    <div v-if="hasMore" class="load-more flex justify-center mt-6">
      <el-button :loading="loading" @click="$emit('load-more')">
        加载更多
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import {
  ChatLineRound,
  Location,
  ChatDotRound,
  More,
} from "@element-plus/icons-vue";

const props = defineProps({
  comments: {
    type: Array,
    default: () => [],
  },
  currentUser: {
    type: Object,
    required: true,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  hasMore: {
    type: Boolean,
    default: false,
  },
  buttonStyle: {
    type: String,
    default: 'arco',
  },
});

const emit = defineEmits(["submit", "load-more"]);

// 评论相关
const commentContent = ref("");
const rating = ref(5);

// 回复相关
const activeReplyId = ref(null);
const replyContent = ref("");
const activeReplyToUser = ref(null);

// 提交评论
const submitComment = () => {
  if (!commentContent.value.trim()) {
    ElMessage.warning("请输入评论内容");
    return;
  }

  emit("submit", {
    content: commentContent.value,
    rating: rating.value,
  });

  // 重置表单
  commentContent.value = "";
  rating.value = 5;
};

// 显示回复输入框
const showReplyInput = (comment, replyTo = null) => {
  activeReplyId.value = comment.id;
  activeReplyToUser.value = replyTo ? replyTo.user : null;
  replyContent.value = "";
  
  // 滚动到回复输入框
  setTimeout(() => {
    document.getElementById(`reply-input-${comment.id}`)?.scrollIntoView({ behavior: 'smooth', block: 'center' });
  }, 100);
};

// 取消回复
const cancelReply = () => {
  activeReplyId.value = null;
  activeReplyToUser.value = null;
  replyContent.value = "";
};

// 提交回复
const submitReply = (comment) => {
  if (!replyContent.value.trim()) {
    ElMessage.warning("请输入回复内容");
    return;
  }

  const replyData = {
    content: replyContent.value,
    parentId: comment.id,
  };
  
  // 如果回复的是评论下的回复，添加replyToId
  if (activeReplyToUser.value) {
    replyData.replyToId = activeReplyToUser.value.id;
    replyData.replyToName = activeReplyToUser.value.name;
  }

  emit("submit", replyData);

  // 重置表单
  cancelReply();
};

// 格式化日期
const formatDate = (date) => {
  return new Date(date).toLocaleDateString("zh-CN", {
    year: "numeric",
    month: "long",
    day: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  });
};
</script>

<style lang="scss" scoped>
.comment-section {
  @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm;

  .comment-input {
    @apply bg-white dark:bg-gray-800 transition-shadow;
    
    .el-rate {
      @apply dark:text-yellow-400;
    }
  }

  .comment-item {
    @apply transition-shadow hover:shadow-md dark:shadow-gray-900 bg-white dark:bg-gray-800;
    
    .user-name {
      @apply text-gray-900 dark:text-gray-100;
    }
    
    .comment-content p {
      @apply text-gray-700 dark:text-gray-300;
    }
  }

  .action-btn {
    @apply transition-colors;
  }

  .actions {
    @apply justify-end;
  }

  .reply-item {
    @apply border-b border-gray-100 dark:border-gray-700 last:border-b-0 pb-3;
    
    .el-button.arco-btn {
      @apply text-xs px-2 py-0.5;
    }
  }
  
  .replies-list {
    @apply border-l-2 border-gray-100 dark:border-gray-700;
  }

  .reply-to-info {
    @apply rounded-md bg-gray-50 dark:bg-gray-700 p-1 inline-block;
  }

  .action-buttons {
    @apply flex items-center space-x-2;

    .el-button {
      @apply text-sm;

      &.is-liked {
        @apply text-primary-600 dark:text-primary-400;
      }
      
      &.arco-btn {
        @apply flex items-center px-3 py-1 rounded-md text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 hover:text-primary-600 dark:hover:text-primary-400 transition-colors text-xs;
        @apply border-0 shadow-sm;
        
        &.is-liked {
          @apply text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/30;
        }
        
        .el-icon {
          @apply mr-1 inline-flex items-center justify-center;
        }
      }
    }
  }
  
  // 添加动画效果
  .reply-input {
    @apply transition-all duration-300 ease-in-out;
    animation: slideDown 0.3s ease-in-out;
  }
  
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
</style>
